// webpack 是 node 写出来的, node的写法
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    devServer: {
        // 开发服务器的配置
        port: 5000,
        progress: true,
        contentBase: './build',
        compress: true,
        open: true
    },
    // mode: 'development', // 默认两种 production development
    mode: 'development',
    entry: './src/index.js', //  入口
    output: {
        filename: 'bundle.[hash:8].js', // 打包后的文件名
        path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径 
    },
    plugins: [
        // 数组 放着所有的 webpack 插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true
        }),
    ],
    module: { // 模块
        rules: [
            {   // css loader 解决 @import 这种语法的
                test: /\.css$/,
                // 只用一个 loader
                // 多个 loader 需要数组
                // use: 'css-loader'
                // loader 的顺序 默认是从右向左执行
                // loader 还可以写成对象的方式
                use: [
                    {
                        // style-loader 他是把css 插入到 head 标签中
                        loader: 'style-loader',
                        options: {
                            // api 发生改变啦
                            insert: 'top'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // 可以处理 less文件 sass stylus node-sass sass-loader
                // stylus stylus-loader
                test: /\.less$/,
                use: [
                    {
                        // style-loader 他是把css 插入到 head 标签中
                        loader: 'style-loader',
                        options: {
                            // api 发生改变啦
                            insert: 'top'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
        ]
    }
}